<script setup lang="ts" name="energy_index">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { setAutoCheckALert, setAutoCheckData } from "@/utils/autoCheck";
import { deviceCount, detectionLog, deviceLog } from "@/api/server_repair";
import * as echarts from 'echarts';
const router = useRouter();
onMounted(() => {
  // echarts折线图
  type EChartsOption = echarts.EChartsOption;

  var chartDom = document.getElementById('main')!;
  var myChart = echarts.init(chartDom);
  window.onresize = function () {
    myChart.resize();
  };
  var option: EChartsOption;

  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: [
        { name: '今日', textStyle: { color: 'auto' }, },
        { name: '本周', textStyle: { color: 'auto' }, },
        { name: '本月', textStyle: { color: 'auto' }, },
      ]
    },
    // 下载
    // toolbox: {
    //   feature: {
    //     saveAsImage: {}
    //   }
    // },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['0:00', '6:00', '12:00', '18:00', '0:00']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '今日',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 120]
      },
      {
        name: '本周',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 220]
      },
      {
        name: '本月',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [150, 232, 201, 154, 150]
      },
    ]
  };
  option && myChart.setOption(option);



})


// 表格数据
const tableData = [
  {
    date: '00088995',
    name: 'Tom',
    water: '75',
    address: '2021-12-05',
  },
  {
    date: '00546595',
    name: 'Tom',
    water: '89',
    address: '2021-02-15',
  },
  {
    date: '452342323',
    name: 'Tom',
    water: '12',
    address: '2021-06-15',
  },
  {
    date: '45645636',
    name: 'Tom',
    water: '18',
    address: '2021-09-09',
  },
]

</script>

<template>
  <div class="energy-flex">
    <div class="energy-box">
      <!-- 设备信息 -->
      <app-box class="energy-en" :title="'设备信息'">
        <el-table :data="tableData" stripe style="height: 100%;width: 100%">
          <el-table-column prop="date" label="设备序列号" />
          <el-table-column prop="name" label="设备名称" />
          <el-table-column prop="address" label="上报时间" />
        </el-table>
      </app-box>
      <!-- echarts折线图 -->
      <app-box class="energy-en-bo" :title="'设备用水量趋势'">
        <div id="main" style="height: 80%; margin-top: 20px;"></div>
      </app-box>
    </div>
    <div class="energy-bom">
      <app-box class="energy-rn" :title="'实时记录'">
        <!-- <div class="energy-rn-fiex">
          <div>设备序列号</div>
          <div>设备名称</div>
          <div>当前累计用水量</div>
          <div>上报时间</div>
        </div> -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="设备序列号" />
          <el-table-column prop="name" label="设备名称" />
          <el-table-column prop="water" label="当前累计用水量" />
          <el-table-column prop="address" label="上报时间" />
        </el-table>
      </app-box>
    </div>
  </div>
</template>

<style  lang="scss" scoped>
// .xxx-x {
//   width: 100%;
//   height: 100%;
// }
.energy-flex {
  display: flex;
  width: 100%;
  height: 100%;

  .energy-box {
    height: 100%;
    width: 30%;

    .energy-en {
      height: 50%;
      width: 100%;
    }

    .energy-en-bo {
      height: calc(50% - 10px);
      width: 100%;
      margin-top: 10px;
    }
  }

  // 实时记录
  .energy-bom {
    display: flex;
    height: 100%;
    width: 70%;

    .energy-rn {
      width: 100%;
      margin-left: 10px;

      // 内容flex
      .energy-rn-fiex {
        height: 40px;
        line-height: 40px;
        color: #00b4ff;
        display: flex;
        justify-content: space-around;
      }
    }
  }
}
</style>
